<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom</title>
</head>
<body>
    <div id="box1">这是一个id选择器标签</div>
    <div class="box2">这是一个类选择器标签</div>
    <div>普通的div标签</div>
    <button>点击按钮</button>
    <script>
        var element_id=document.getElementById("box1");
        console.log(element_id);
        var element_class=document.getElementsByClassName("box2")[0];
        console.log(element_class);
        var element_tag=document.getElementsByTagName("div")[2];
        console.log(element_tag);
        element_id.innerHTML="修改id选择器标签文本内容";
        element_class.innerText="修改后的类选择器标签文本内容";
        element_tag.style.color="red";
        element_tag.style.fontSize="20px";
        //dom属性绑定事件
        var button_element=document.getElementsByTagName("button")[0];
        console.log(button_element);
        button_element.onclick=function(){
            alert("dom属性事件触发");
        }
        // button_element.addEventListener("click",function(){
        //      alert("通过addEventListener触发");
        // });

        button_element.addEventListener("click",click_event);
        function click_event(){
            alert("通过addEventListener触发事件");
        }
    </script>
</body>
</html>